<title>目录管理</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>目录管理</cite></a>
        <a><cite>目录维护</cite></a>
    </div>
</div>

<style>
    .myscroll {
        overflow-y: scroll;
        overflow-x: scroll;
        height: 80vh;
    }

    /*tree node 点击选中变色*/
    .tree-txt-active {
        color: #2294ff !important;
        font-weight: bold
    }

    /*tree node 鼠标经过变色*/
    .layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
        color: #2294ff !important;
        text-decoration: underline;
        transition: .3s;
    }
</style>

<div class="layui-fluid layadmin-homepage-fluid">
    <div class="layui-row  layui-col-space15">
        <div class="layui-col-xs12 layui-col-sm5 layui-col-md4">
            <div class="myscroll layui-card" data-type="nodetree" id="nodetree">
                <div class="layui-card-body">
                    <div id="node-tree"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm7 layui-col-md8">
            <div class="myscroll layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="factoryForm" id="factoryForm">
                        <div class="layui-input-block"></div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label">ID：<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i> </label>
                            <div class="layui-input-block">
                                <input type="text" name="id" lay-filter="id" lay-verify="required" disabled
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item ">
                            <label class="layui-form-label">层级：<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i> </label>
                            <div class="layui-input-block">
                                <input type="text" name="level" lay-filter="level" lay-verify="required" disabled
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">菜单名称:<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-filter="title" lay-verify="required"
                                    placeholder="请输入名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">节点name:<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="text" name="name" lay-filter="name" lay-verify="required" placeholder="请输入"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">路由jump：</label>
                            <div class="layui-input-block">
                                <input type="text" name="jump" lay-filter="jump" placeholder="请输入" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图标:<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="text" name="icon" lay-filter="icon" lay-verify="required" placeholder="请输入"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否默认展开：<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="spread" lay-verify="required" value="true" lay-skin="switch">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">顺序号：<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="text" name="orderno" lay-filter="orderno" lay-verify="required"
                                    placeholder="请输入数字" autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux">数字越小，排序越往前。默认：999</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">Path：<i class="layui-icon layui-icon-star-fill"
                                    style="font-size: 10px; color: #FF5722;"></i></label>
                            <div class="layui-input-block">
                                <input type="text" name="path" lay-filter="path" lay-verify="required" placeholder="请输入"
                                    autocomplete="off" class="layui-input">
                                <div class="layui-form-mid layui-word-aux"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-inline">
                                <input type="button" lay-submit lay-filter="save-node" value="保存"
                                    class="layui-btn layui-btn-radius">
                            </div>
                        </div>
                        <input type="hidden" name="id" lay-filter="id">
                        <input type="hidden" name="pid" lay-filter="pid">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['admin', 'layTree', 'form', 'setter', 'dropdown'], function () {

        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , layTree = layui.layTree
            , setter = layui.setter
            , dropdown = layui.dropdown
            , form = layui.form


        var local = layui.data(setter.tableName);

        var dropdown = layui.dropdown;

        var currentNode;

        $('#nodetree').click(function (e) { // 在页面任意位置点击而触发此事件
            if ($(e.target).attr('class') === "layui-tree-txt") { // 防止因为点击展开按钮把已选中的样式取消
                $(".layui-tree-txt").removeClass("tree-txt-active"); // 移除点击样式
                $(e.target).addClass("tree-txt-active"); // e.target表示被点击的目标
            }
        });

        var sendFormData = function (data) {
            //factoryForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            form.val("factoryForm", {
                "title": data.title
                , "name": data.name
                , "id": data.id
                , "icon": data.icon
                , "jump": data.jump
                , "spread": data.spread
                , "pid": data.pid
                , "orderno": data.orderNo
                , "path": data.path
                , "level": data.level
            });
        }

        var initNodeForm = function (obj) {
            console.info(obj.data);
            currentNode = obj.data;
            sendFormData(obj.data);
        }

        form.on("submit(save-node)", function (form) {
            console.info(form.field);
            admin.req({
                url: setter.apiUrl + "/node-api/node"
                , type: 'POST'
                , data: JSON.stringify(form.field)
                , contentType: "application/json;charset=UTF-8"
                , success: function () {
                    layer.msg('保存成功,正在刷新...', {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        location.reload();
                        // layer.close(index);
                    });
                }
            });
        });

        // 创建树
        layTree.CreateTree("node-tree", "/node-api/node-tree/0", { id: 0 }, false, true, initNodeForm);

        var isCurrentNodeNull = function (obj) {
            if (obj == undefined || obj.id==0)  {
                layer.msg('请先选中当前目录后再添加对应的相关目录。');
                return false;
            } else return true;
        }
        //自定义按钮事件 data-type， 需要最后手动绑定
        var active = {
            nodetree: function () {
                console.info('nnnnnn')
                dropdown.render({
                    elem: '#nodetree' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单
                    , trigger: 'contextmenu' //右键事件
                    , data: [{
                        title: '添加根目录'
                        , id: 'addroot'
                    }, {
                        title: '添加同级目录'
                        , id: 'add'
                    }, {
                        title: '添加子级目录'
                        , id: 'addchildren'
                    }, { type: '-' }, {
                        title: '删除当前目录'
                        , id: 'del'
                    }, {
                        title: '刷新'
                        , id: 'refresh'
                    }]
                    , click: function (menudata) {
                        if (menudata.id === 'addroot') {
                            // console.info(currentNode);

                            //手动清空
                            // sendFormData({});

                            //必须form标签
                            $('#factoryForm')[0].reset();
                            // form.render();

                            var newNode = {
                                "id" : 0
                                , "icon": "layui-icon-component"
                                , "spread": true
                                , "pid": 0
                                , "orderNo": 999
                                , "level": 1
                            }
                            sendFormData(newNode);


                        } else if (menudata.id === 'del') {
                            if (!isCurrentNodeNull(currentNode)) { return false; }
                            layer.confirm('确定删除此记录信息吗？', function (index) {
                                // 调用后台接口删除 选择数据
                                admin.req({
                                    url: setter.apiUrl + "/node-api/node"
                                    , type: 'DELETE'
                                    , data: JSON.stringify(currentNode)
                                    , contentType: "application/json;charset=UTF-8"
                                    , success: function () {
                                        layer.msg('删除成功,正在刷新...', {
                                            icon: 1,
                                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                        }, function () {
                                            location.reload();
                                            // layer.close(index);
                                        });
                                    }
                                });
                            });
                        } else if (menudata.id === 'add') {
                            if (!isCurrentNodeNull(currentNode)) { return false; }
                            $('#factoryForm')[0].reset();
                            // form.render();
                            var newNode = {
                                "id" : 0
                                , "icon": "layui-icon-component"
                                , "spread": true
                                , "pid": currentNode.pid
                                , "orderNo": 999
                                , "level": currentNode.level
                            }
                            sendFormData(newNode);
                        } else if (menudata.id === 'addchildren') {
                            if (!isCurrentNodeNull(currentNode)) { return false; }
                            $('#factoryForm')[0].reset();
                            // form.render();
                            var newNode = {
                                "id" : 0
                                , "icon": "layui-icon-component"
                                , "spread": true
                                , "pid": currentNode.id
                                , "orderNo": 999
                                , "level": currentNode.level +1
                            }
                            sendFormData(newNode);
                            layer.msg('dept编辑操作，当前行 ID:' + data.id);
                        } else if (menudata.id === 'refresh') {
                            layer.msg('刷新。。。。');
                            location.reload();
                        }
                    }
                });

            }
        };

        //根据class 手动绑定 data-type click左键、contextmenu右键事件
        $('.layui-card').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        }).on('contextmenu', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>